<template>
<!-- vuec可打出全部结构 出现报错保存一下-->
  <div>
    <ul>
      <!--问题：为什么要删除两个li？ 用v-for循环“item in”是固定写法 navs是data里数据 :keys="item"固定写法 -->
      <!-- 给大学起点删除了做渲染动态高亮 -->
     <!-- <li v-for="item in navs" :key="item" class="active">大学起点</li> -->
     <!-- <li>高中起点</li>
      <li>中专起点</li> -->
      <!-- class="active"给他做对象是因为要把第一个大学起点默认做高亮 -->
     <!-- <li v-for="item in navs" :key="item" class="{active：}"> -->
       <!-- 要把 {{item}} 和{{index}}索引值拿到就得把"item in navs"换成"(item,index) 然后把后面
       没写完的{active}删掉"  此时看效果 三个起点都已经渲染上了-->
       <!-- 要确认大学起点有了索引值第一个是索引值所以用的 {{item}}和{{index}}来看 然后设置索引值给动态设置
       使大学起点为第一个索引值 这时控制台渲染上了第一个大学同学的颜色-->
       <!-- <li v-for="(item,index) in navs" :key="item" :class="{active:index===0}"> -->
         <li v-for="(item,index)in navs" :key="item" :class="{active:index===now}" @click="now=index">
       {{item}} {{index}}
       </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navs: ['大学起点', '高中起点', '中专起点']
    }
  },

  created () {

  },

  methods: {

  }
}
</script>

<style scoped lang='less'>
ul {
  list-style: none;
  border-radius: 10px;
  width: 300px;
  overflow: hidden;
  padding: 0;
  li {
    float: left;
    width: 100px;
    height: 40px;
    background-color: #ccc;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
  .active {
    background-color: blue;
  }
}
</style>
